<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<view class="justify-center group_2">
				<text class="text_1">新手机号码</text>
				<view class="u-m-l-30"><input type="text" class="text_2" placeholder="请输入新的手机号" v-model="phone"> </view>
				
			</view>
			<view class="justify-between group_3">
				<view class="flex-row">
					<text class="text_3">短信验证</text>
					<view class="u-m-l-50"> <input type="text_4" v-model="msg" placeholder="请输入验证码"></view>
					
				</view>
				<text class="text_5" @tap="getCode">{{tips}}</text>
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<!-- <u-button ></u-button> -->
				</view>
			</view>
			<view class="divider">
				<!--*-->
			</view>
			<view class="flex-col button" @click="submits">
				<view class="section_2">
					<text class="">完成</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				phone: '',
				msg: '',
				seconds: 60,
				tips: '',
				code: ''
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('user.code', {
						phone: this.phone
					}).then(r => {
						if (r.code == 200) {
							this.code = r.data;
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							this.msg = r.data
						} else {
							uni.$u.toast(r.msg);
						}
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('请输入验证短信');
			},
			start() {
				uni.$u.toast('我们已经发送了验证短信到你的手机');
			},
			finish(e) {
				console.log(e)
			},
			submits() {
				if (this.phone == '') {
					uni.$u.toast('手机号码不能为空');
				}
				if (this.msg == '') {
					uni.$u.toast('短信验证码不能为空');
				}
				if (this.msg != this.code) {
					uni.$u.toast('短信验证码输入有误');
				}
				this.$http('user.changePhone', {
						newPhone : this.phone,
						code  : this.msg,
					}).then(r => {
						if(r.code==200)
						{
							uni.$u.toast(r.msg);
							
							this.$u.toast(r.msg);
						
								this.go('/pages/index/my',true);
							
							
						}else{
							uni.$u.toast(r.msg);
						}
						
					});
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_1 {
		padding: 25.5rpx 32rpx 595rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_2 {
		position: relative;
	}

	.group_3 {
		margin-top: 41rpx;
		padding-top: 30rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.divider {
		margin-top: 42rpx;
		background-color: #eeeeee;
		height: 1rpx;
	}

	.button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		justify-items: center;
		margin-top: 297rpx;
		padding-bottom: 6rpx;
	}

	.text_1 {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_2 {
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_5 {
		margin-top: 4rpx;
		color: #4177dd;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.section_2 {
		display: flex;
		flex-direction: row;
		justify-items: center;
		justify-content: center;
		background-color: #1d6aff;
		line-height: 45px;
		border-radius: 8rpx;
		height: 88rpx;
		color: #ffffff;
	}



	.text_3 {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_4 {
		margin-left: 56rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
